<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta charset="UTF-8">
	<title>ElementDemo</title>
	<link rel="stylesheet" href="../element-ui/lib/theme-default/index.css">
	<script src="../js/jquery-3.1.1.min.js"></script>
	<script src="../js/json2.js"></script>
	<script src="../js/vue.min.js"></script>  
	<script src="../js/vue-resource.js"></script>
	<script src="../element-ui/lib/index.js"></script>
	<script src="../element-ui/lib/locale/index.js"></script>
	<script src="../element-ui/lib/locale/lang/en.js"></script>
	
	<style>
	  .el-select .el-input {
	    width: 110px;
	  }

  	  .el-table .info-row {
    		background: #c9e5f5;
      }	  
      
      #top {
	      background:#20A0FF;
	      padding:5px;
	      overflow:hidden
      }
	</style>
	
</head>
<body>
    <div id="test">		        
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
  <el-menu-item index="1">处理中心</el-menu-item>
  <el-submenu index="2">
    <template slot="title">我的工作台</template>
    <el-menu-item index="2-1">选项1</el-menu-item>
    <el-menu-item index="2-2">选项2</el-menu-item>
    <el-menu-item index="2-3">选项3</el-menu-item>
    <el-submenu index="2-4">
      <template slot="title">选项4</template>
      <el-menu-item index="2-4-1">选项1</el-menu-item>
      <el-menu-item index="2-4-2">选项2</el-menu-item>
      <el-menu-item index="2-4-3">选项3</el-menu-item>
    </el-submenu>
  </el-submenu>
  <el-menu-item index="3" disabled>消息中心</el-menu-item>
  <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
</el-menu>
		<div id="top">			
			<span>	
				<el-button type="text" @click="add" style="color:white">添加</el-button>	
				<el-button type="text" @click="deletenames" style="color:white">批量删除</el-button>		
				
			</span>						
		</div>	
		    <div class="block">
    <span class="demonstration">显示默认颜色</span>
    <span class="wrapper">
    <el-button type="success">成功按钮</el-button>
    <el-button type="warning">警告按钮</el-button>
    <el-button type="danger">危险按钮</el-button>
    <el-button type="info">信息按钮</el-button>
    </span>
    </div>
    <br/>
    <div class="block">
      <span class="demonstration">hover 显示颜色</span>
    <span class="wrapper">
    <el-button :plain="true" type="success">成功按钮</el-button>
    <el-button :plain="true" type="warning">警告按钮</el-button>
    <el-button :plain="true" type="danger">危险按钮</el-button>
    <el-button :plain="true" type="info">信息按钮</el-button>
    </span>
		
		<br/>

        <div style="margin-top:15px">
           <el-input placeholder="请输入内容" v-model="criteria" style="padding-bottom:10px;">
			  <el-select v-model="select" slot="prepend" placeholder="请选择">
			     <el-option label="id" value="1"></el-option>
			     <el-option label="name" value="2"></el-option>
			  </el-select>
			  <el-button slot="append" icon="search" v-on:click="search"></el-button>
		  </el-input>  		

		  <el-table
		    ref="testTable"		  
		    :data="tableData"
		    style="width:100%"
		    border
		    :default-sort = "{prop: 'id', order: 'ascending'}"
		    @selection-change="handleSelectionChange"	
		    @row-click="handleclick"
		    :row-class-name = "tableRowClassName"
		    >
		    <el-table-column
		      type="selection"
		      >
		    </el-table-column>
		    <el-table-column
		      prop="id"
		      label="Id"
		      sortable
		      show-overflow-tooltip>
		    </el-table-column>
		    <el-table-column
		      prop="name"
		      label="姓名"
		      sortable>
		    </el-table-column>
	        <el-table-column label="操作">
		      <template scope="scope">
		        <el-button
		          size="small"
		          type="primary"
		          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
		        <el-button
		          size="small"
		          type="danger"
		          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
		      </template>
		    </el-table-column>
		  </el-table>
		  
		  <div align="center">
			  <el-pagination
			      @size-change="handleSizeChange"
			      @current-change="handleCurrentChange"
			      :current-page="currentPage"
			      :page-sizes="[10, 20, 30, 40]"
			      :page-size="pagesize"
			      layout="total, sizes, prev, pager, next, jumper"
			      :total="totalCount">
			  </el-pagination>
		  </div>
		</div> 
    </div>
	
    <footer align="center">
        <p>&copy; Spring Boot Demo</p>
    </footer>

	<script>
	var vue = new Vue({			
			el:"#test",
		    data: {
		    	activeIndex : 0,
		    	//表格当前页数据
		    	tableData: [],
		    	
		    	//多选数组
		        multipleSelection: [],
		        
		        //请求的URL
		        url:'../getstu',
		        
		        //搜索条件
		        criteria: '',
		        
		        //下拉菜单选项
		        select: '',
		        
		        //默认每页数据量
		        pagesize: 10,
		        
		        //默认高亮行数据id
		        highlightId: -1,
		        
		        //当前页码
		        currentPage: 1,
		        
		        //查询的页码
		        start: 1,
		        
		        //默认数据总数
		        totalCount: 1000,
		    },

		    methods: {
		        handleSelect(key, keyPath) {
		            console.log(key, keyPath);
		          },
		    	
		        //从服务器读取数据
				loadData: function(criteria, pageNum, pageSize){					
					this.$http.get(this.url,{parameter:criteria, pageNum:pageNum, pageSize:pageSize}).then(function(res){
                		this.tableData = res.data.studentdata;
                		this.totalCount = res.data.number;
                	},function(){
                  		console.log('failed');
                	});					
				},
		    	
				//多选响应
			    handleSelectionChange: function(val) {
			        this.multipleSelection = val;
			    },
			    
			    //点击行响应
			    handleclick: function(row, event, column){
			    	this.highlightId = row.id;
			    },
					
			    //编辑
				handleEdit: function(index, row) {
				    this.$prompt('请输入新名称', '提示', {
		                  confirmButtonText: '确定',
		                  cancelButtonText: '取消',
		                }).then(({ value }) => {
		                	if(value==''||value==null)
		        				return;
		        			this.$http.post('../update',{"id":row.id,"name":value},{emulateJSON: true}).then(function(res){
		        				this.loadData(this.criteria, this.currentPage, this.pagesize);	        					
		                    },function(){
		                        console.log('failed');
		                    });
		                }).catch(() => {

		            });
		        },
		        
				      
		        //单行删除
			    handleDelete: function(index, row) {
			        var array = [];
		        	array.push(row.id);
					this.$http.post('../delete',{"array":array},{emulateJSON: true}).then(function(res){
						this.loadData(this.criteria, this.currentPage, this.pagesize);
		            },function(){
		                console.log('failed');
		            });
		        },
		        
		        //搜索
		        search: function(){
		        	this.loadData(this.criteria, this.currentPage, this.pagesize);
		        },
		        
		        //添加
		        add: function(){
		                this.$prompt('请输入名称', '提示', {
		                  confirmButtonText: '确定',
		                  cancelButtonText: '取消',
		                }).then(({ value }) => {
		                	if(value==''||value==null)
		        				return;
		        			this.$http.post('../add',{"name":value},{emulateJSON: true}).then(function(res){
		        				this.loadData(this.criteria, this.currentPage, this.pagesize);
		                    },function(){
		                        console.log('failed');
		                    });
		                }).catch(() => {
 
		            });
		              
		        },
		        
		        //多项删除
		        deletenames: function(){
		        	if(this.multipleSelection.length==0)
		        		return;
		        	var array = [];
		        	this.multipleSelection.forEach((item) => {
		        		array.push(item.id);
			        })
					this.$http.post('../delete',{"array":array},{emulateJSON: true}).then(function(res){
						this.loadData(this.criteria, this.currentPage, this.pagesize);
		            },function(){
		                console.log('failed');
		            });
		        },
		      
		        //改变当前点击的行的class，高亮当前行
		        tableRowClassName: function(row, index){
		    	   if(row.id == this.highlightId)
		    	   {
		    		  return 'info-row';
		    	   }
		        },
		      
		        //每页显示数据量变更
		        handleSizeChange: function(val) {
		            this.pagesize = val;
		            this.loadData(this.criteria, this.currentPage, this.pagesize);
		        },
		        
		        //页码变更
		        handleCurrentChange: function(val) {
		            this.currentPage = val;
		            this.loadData(this.criteria, this.currentPage, this.pagesize);
		        },	      
		        		        
		    },	    
		    
		    
		  });
	
		  //载入数据
    	  vue.loadData(vue.criteria, vue.currentPage, vue.pagesize);
    	  Vue.config.lang = 'en';
	</script>  
	
</body>
</html>